<template>
  <ComWrapper>
    <el-card shadow="never">
      <el-row :gutter="20">
        <el-col :span="16" class="input-wrap">
          <el-input placeholder="请输入角色名称" v-model="roleName" style="margin-right:10px" />
          <Button icon="el-icon-search" text="搜索" @btnClick="onSearch" />
          <Button icon="el-icon-circle-plus" text="添加" />
        </el-col>
        <el-col :span="8">
          <span class="select-text">切换角色</span>
          <el-select v-model="value" placeholder="切换角色">
            <el-option
              v-for="item in options"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            />
          </el-select>
        </el-col>
      </el-row>
      <el-table :data="rolelist" style="width: 100%; margin-top: 20px;" stripe>
        <el-table-column prop="roleName" label="角色名称" width="300" />
        <el-table-column prop="description" label="角色说明" width="230" />
        <el-table-column label="角色成员" #default="scope" width="200">
          <el-link type="primary" underline @click="seeRoleMember(scope)">角色查看</el-link>
        </el-table-column>
        <el-table-column label="角色权限" #default="scope" width="330">
          <el-link type="primary" underline @click="editSeeAuth(scope, 'edit')" style="margin-right:20px">编辑权限</el-link>
          <el-link type="primary" underline @click="editSeeAuth(scope, 'show')">查看权限</el-link>
        </el-table-column>
        <el-table-column label="是否禁用" #default="scope" width="200">
          <el-switch v-model="scope.row.isUsed" disabled />
        </el-table-column>
        <el-table-column label="操作" #default="scope">
          <el-button type="danger" @click="deleteRole(scope)">删除</el-button>
        </el-table-column>
      </el-table>
    </el-card>

    <Pagination :total="total" @onSizeChange="onSizeChange" @onPageChange="onPageChange" />
    <RoleMember :roleName="roleMemberTitle" v-model="roleMemberVisible" />
    <SeeAndAuthRoleAuth v-model="roleAuthVisible" :roleId="roleId" :title="roleAuthTitle" :type="authModalType" />
  </ComWrapper>
</template>

<script setup>
import {ref, onMounted, h, defineAsyncComponent} from 'vue'
import {ElMessage, ElMessageBox} from 'element-plus'
import {getAllRoles} from '@/service/permission'
import usePagination from '@/hooks/usePagination'

const Pagination = defineAsyncComponent(() => import('@/components/Pagination'))
const RoleMember = defineAsyncComponent(() => import('./component/RoleMember'))
const SeeAndAuthRoleAuth = defineAsyncComponent(() => import('./component/SeeAndAuthRoleAuth'))

const roleId = ref(0)
const total = ref(0)
const value = ref('')
const roleName = ref('')
const authModalType = ref('')
const roleMemberTitle = ref('')
const roleAuthTitle = ref('')
const roleMemberVisible = ref(false)
const roleAuthVisible = ref(false)
const rolelist = ref([])

const {page, pageSize} = usePagination()

onMounted(async () => {
  getAllRoleData()
})

// 页数、页码改变
function onSizeChange(currentSize) {
  pageSize.value = currentSize
  getAllRoleData()
}
function onPageChange(currentPage) {
  page.value = currentPage
  getAllRoleData()
}
// 角色查看
function seeRoleMember({row}) {
  roleMemberVisible.value = true
  roleMemberTitle.value = `${row.roleName} 权限`
}
// 权限查看、编辑
function editSeeAuth({row}, type) {
  authModalType.value = type
  roleId.value = row.id
  roleAuthVisible.value = true
  roleAuthTitle.value = row.roleName
}
// 获取所有权限列表
async function getAllRoleData() {
  const {flag, data = {}} = await getAllRoles({
    current: page.value,
    size: pageSize.value,
    roleName: roleName.value
  })
  if (flag) {
    total.value = data.total
    rolelist.value = data.records
  }
}
// 搜索
function onSearch() {
  const roleNameVal = roleName.value
  if (!roleNameVal) return
  page.value = 1
  pageSize.value = 10
  getAllRoleData()
}
// 删除角色
function deleteRole({row}) {
  const {description} = row
  ElMessageBox.confirm(
    h('p', null, [
      h('span', null, '确定要删除  '),
      h('i', {style: 'color: teal'}, description),
      h('span', null, '  吗？'),
    ]),
    '温馨提示',
    {
      confirmButtonText: 'OK',
      cancelButtonText: 'Cancel',
      type: 'warning',
    }
  ).then(() => {
    ElMessage.error(`抱歉，${description}暂时不能删除`)
  })
}

const options = [
  {
    value: 'Option1',
    label: 'Option1',
  },
  {
    value: 'Option2',
    label: 'Option2',
  },
  {
    value: 'Option3',
    label: 'Option3',
  },
  {
    value: 'Option4',
    label: 'Option4',
  },
  {
    value: 'Option5',
    label: 'Option5',
  },
]
</script>

<style scoped lang="scss">
@import '@/assets/style/mixin.scss';
@import '@/assets/style/mixin.scss';

.input-wrap {
  @include fl();
  :deep(.el-input) {
    width: 300px !important;
  }
}
.select-text {
  font-size: $font-size-medium;
  margin-right: 10px;
  font-weight: bold;
}
</style>
